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ELECTRONIC PRODUCT DESIGN 
Field f the Invention 

[0001] The present invention relates to computer-implemented automated electronic product 
design. 

Background of the Invention 

[0002] Many individuals, businesses, and organizations occasionally have a need to purchase 
a quantity of custom printed materials, such as birth aimouncements, party invitations, product or 
service brochures, promotional postcards, personalized holiday cards, or any number of other 
things. Many of these individuals and businesses tum to sources such as a local print shop while 
others rely on any of the various specialized software products available for purchase and 
installation on an appropriate computer system. 

[0003] To provide an alternative to the above approaches, printing service providers, taking 
advantage of the capabilities of the Web and modem Web browsers, provide document design 
services for user's desiring to create customized documents from any computer with Web access 
at whatever time and place is convenient to the user. These service providers typically provide 
their customers with the ability to access the service provider's web site, view product templates, 
and enter information to create a customized markup language document. In a typical Web- 
based system, editing is usually limited to allowing the user to add, modify and position text and 
perhaps upload images for incorporation into the product design. After a document has been 
designed by the user, Web-based service providers also typically allow the user to place an order 
for the production and delivery to the user's home or business of quantities of high quality, 
printed documents of the type that the user is not capable of producing with the printer systems 
typically connected to most personal computer systems. 

[0004] Pre-designed document templates that can be individually selected and downloaded to 
assist the user in creating a personalized docxmient in the user's browser are known in the art. 
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Some service providers offer templates having similar designs for a range of products so that an 
individual or business can design and order different products, such as business cards, letterhead, 
brochures, presentation folders, and retum address labels, that share a common look and style. 
For each type of product, a number of different templates with various images and design 
features are provided to offer the user a range of design choices. 

[0005] Traditionally, the service provider has individually designed each template by 
defining all details of the template, such as the position of all image and text areas in the 
template, selecting, sizing and positioning images in the template, defining colors to be used for 
template elements having a color attribute, and so forth. The template designer adjusts the 
elements until the designer is satisfied with the overall appearance of the template. This hand 
crafting of template design is time consuming and, therefore, a significant expense for the service 
provider. A service provider may only have the resources to produce a limited number of 
template variations. 

[0006] When the user selects a desired template, the information required to render the 
template is downloaded to the user's computer system along with downloaded software tools that 
can be employed by the user to create a personalized electronic document. For a two-sided 
product, such as a folded card, the templates for the front and the inside of the card are usually 
provided separately with the front being provided for editing first. 

[0007] There is a need for a flexible electronic document editing and customization system 
that allows a user greater control over the selecting and modifying the content and appearance of 
the docxmient template while maintaining consistency in the appearance and style of the entire 
document and providing the ability to extend the user's customized document design features to 
other user docimients. 
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Summary 

[0008] The present invention is directed to satisfying the need for systems and methods that 
provide flexible automated generation of electronic product designs. 

[0009] In accordance with the invention, templates are constructed ifrom individual 
composite elements. The identifiers of the component elements in a template are associated with 
a product description identifier that is associated with a user's product design session. Tools are 
provided to allow a user to change one or more of the composite elements of the template. 
When a user changes an element, the identifier of the newly selected element is associated with 
the description identifier. Component elements of one template can be individually used, as 
appropriate, to customize templates for another part of the same document or for different 
documents. 

[0010] It is an advantage of the invention that changes to the component elements of the 
template for a first side of a document can be automatically incorporated into the appearance of 
the template for another side of the document. 

[0011] It is another advantage of the invention that component elements selected by a user 
while editing a docximent template can be used to automatically generate and display additional 
custom documents to the user without user action. 

[0012] It is yet another advantage of the invention that some or all of the component 
elements selected by a user for a first user document can be easily incorporated by the user into 
the design of a different document. 

[0013] These and other objects, features and advantages of the invention will be better 
understood with reference to the accompanying drawings, description and claims. 
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Brief Description of the Drawings 

[0014] Fig. 1 is a block diagram of a computer system with which the invention may be 
employed. 

[0015] Figs. 2-5 are schematic representations of displays presented to a user engaged in 
designing an electronic document. 

[0016] Fig. 6 is a representation of component element identifiers associated with a product 
description identifier in one embodiment of the invention. 

[0017] Fig. 7 is a representation of backside layout identifiers associated with a front side 
layout identifier in one embodiment of the invention. 

[0018] Fig. 8 is a representation of a display presented to a user when in the process of 
purchasing documents. 

[0019] Fig. 9 is a flowchart of a product design method according to the invention. 

Detailed Description 

[0020] Referring to Fig. 1, an exemplary user computer system UCS 100 includes processor 
101 and memory 102. Memory 102 represents all UCS 100 components and subsystems that 
provide data storage, such as RAM, ROM, and hard drives. In addition to providing permanent 
storage for all programs installed on UCS 100, memory 102 also provides temporary storage 
required by the operating system and the applications while they are executing. In a preferred 
embodiment, UCS 100 is a typically equipped personal computer, but UCS 100 could also be a 
portable computer, a tablet computer or other device. The user views images .from UCS 100 on 
display 140, such as a CRT or LCD screen, and provides inputs to UCS 100 via input devices 
150, such as a keyboard and a mouse. 

[0021] When UCS 100 is operating, an instance of the USC 100 operating system will be 
running, represented in Fig. 1 by Operating System 103. In addition, the user may be running 
one or more application programs. In Fig. 1, UCS 100 is running Web browser 105, such as 
Intemet Explorer from Microsoft Corporation. Other applications that may be running in USC 
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100, such as spreadsheet, e-mail, and presentation programs, are represented as applications 104. 
In the exemplary embodiment, design tool 106 is a product design program downloaded to UCS 
100 via network 120 from remote server 110, such as downloadable design tools provided by 
VistaPrint Limited and publicly available at vistaprint.com. Design tool 106 runs in browser 
105 and allows the user to prepare a customized product design in electronic form. 
Altematively, design tool 106 could have been obtained by the user from memory 102 or from 
another local source. When the customer is satisfied with the design of the product, the design 
can be uploaded to server 1 10 for storage and subsequent production of the desired quantity of 
the physical product on appropriate printing and post-print processing systems. As will be 
discussed in more detail below, the user creates a custom product design by customizing a 
template provided by the service provider and adding the user's content. 

[0022] While server 1 10 is shown in Fig. 1 as a single block, it will be understood that server 

110 could be multiple servers configured to communicate and operate cooperatively. Memory 

111 represents all components and subsystems that provide server data storage, such as RAM, 
ROM, and disk drives or arrays. Template memory 112 contains the various layouts, designs, 
color schemes, font schemes and other information provided by the service provider to enable 
the creation and rendering of templates. Co-pending and co-owned U.S. application Serial No. 
10/449,836 entitled "Electronic Document Modification", filed May 30, 2003, describes a Web- 
based document editing system and method using separately selectable layouts, designs, color 
schemes and font schemes and is hereby incorporated by reference into this application. 

[0023] Image memory 113 represents the portion of memory 111 that contains the images 
and related image attributes, such as the image size, the default color scheme associated with the 
image, and the one or more keywords that have been associated with that image by the printing 
service provider. To create a template, individual images are assigned to the image containers 
of a layout. Co-pending and co-owned U.S. application Serial No. 10/646,554 entitled 
"Automated Image Resizing and Cropping", filed August 22, 2003, which is hereby incorporated 
by reference into this application, describes a Web-based document editing system that 
associates images with layout containers using images that have been pre-sized to fit standard 
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layout image containers and another system that dynamically sizes images as required to 
accommodate differently sized layout image containers. 

[0024] Fig. 2 is a simplified representation of an introductory product selection page being 
viewed by the user of UCS 100 on user display 140. The page displays and promotes various 
types of products available from the service provider and offers active controls that allow the 
user of UCS 100 to select a desired type of product for a more detailed presentation of design 
options. By way of example. Fig. 2 shows promotional images for business cards 210, postcards 
220, stationery 230, folded cards 240, retum address labels 250, and brochures 260. Images or 
promotions for different or additional products, such as presentation folders, invitations, 
announcements, thank you cards, gift tags, and so forth could also be presented along with other 
information and links. It will be imderstood that the invention is not limited to documents that 
are intended for eventual printing. The invention is also applicable to the design of documents 
intended for use in electronic form, such as electronic business cards, online brochures, and 
templates for presentation graphics software programs. The invention could as well be readily 
adapted to a wide range of products that a user may wish to customize, such as items of clothing, 
product containers, promotional goods, and so forth. 

[0025] For the purpose of an illustrative example, it will be assumed that the user of UCS 
100 desires to create a personalized folded holiday card and, therefore, selects the folded card 
option, for example by clicking with the user's mouse cursor on the folded cards 240 image. The 
user will then be presented with one or more additional selection screens, not shown, from which 
the user can review the various folded card categories by general theme or subject matter and 
then, when the desired category is selected, review one or more pages of thumbnail images of 
folded card templates prepared by the service provider. When a desired template thumbnail is 
located, the user can click on the image to cause server 1 10 to download the selected template 
information and initiate a custom product design session. As an altemative to providing a large 
gallery of thumbnail template images for the user to scan, the service provider could provide a 
keyword searching tool to allow the service provider to display only thumbnails of templates 
with images or other content corresponding to the user's search terms. 
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[0026] Referring to Fig. 3, when the user selects a template thumbnail that the xiser desires to 
customize, the user is presented with a larger image of the selected template 300. Template 300 
may contain a wide variety and number of images, colors, graphics and other design elements. 
For simplicity of discussion, in the example shown in Fig. 3, template 300 contains one image 
318, one textbox 320 pre-fiUed with relevant text, and field 316 which could be filled with a 
solid color or other design effect. The initial template 300 is the starting point for the user's 
product design. The user can not only add the user's personalized text and images, but can also, 
as discussed below, modify various component elements of template 300. 

[0027] To allow the user to customize the card, the user is presented with template editing 
tools. Edit Tool Bar 312 contains various buttons, controls and menus allowing the user to add 
additional text boxes, insert text, change the font, change font attributes, and perform other 
typical editing actions. The techniques for designing and using edit tool bars are well known in 
the art. 

[0028] Before discussing document controls 3 1 0, the structure of templates will be briefly 
discussed. Templates are generated fi-om the combination of separately defined template 
component elements. In the embodiment discussed herein, the component element building 
blocks used to assemble a template image are layouts, designs, font schemes, color schemes, 
images, and text groups. Each layout, design, font scheme, color scheme, image and text group 
used by the system has a xmique identifier. 

[0029] As used in this embodiment, a layout is an XML description that specifies the size, 
position and other attributes of all product elements such as text containers, image containers, 
graphics, z-index values and so forth. For text containers, the layout also defines the font size 
and specifies the "wash" effect allovdng text to be placed and read on an image. A design 
defines design and style information for each container in a layout. The specific information for 
each container will vary depending on the container contents. For example, for text containers, 
the design may specify the font color, the font style, font weight, and the border. For an image, 
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the design may specify the border. For word art, the design may specify the font weight and the 
color. For shapes in VML or a similar langriage, the design may specify the border, color, path, 
shadow, opacity and fill image. The color scheme defines a set of complementary colors pre- 
selected by the service provider to be applied as a group. A font scheme is a set of 
complementary fonts that have been pre-selected by the service provider to be applied as a 
group. A text group is text that the service provider has selected to be displayed in one or more 
of the editable text areas of a template, such as the text group "Season's Greetings/Warm wishes 
for the Holidays" used to pre-fiU textbox 320 in Fig. 3 and textbox 406 is Fig. 4. Some 
component elements may be unused for some templates, such as a template that does not contain 
any images or does not contain a text group. 

[0030] It will be understood that the foregoing is just one embodiment of the invention. The 
number of component elements could be made larger or smaller and the composition of 
component elements could be varied. As one example, a service provider could choose to 
combine the functions of layout and design together into one element rather than structure them 
separately. 

[0031] Referring again to Fig. 3, the user is also presented with additional active document 
controls 310 that enable the user to customize specific component features of the document. In 
Fig. 3, these document controls are identified as Change Color Scheme 302, Change Layout 304, 
Chaage Design Effects 306, and Change Font Scheme 308. As discussed in the above- 
incorporated application Serial No. 10/449,836, these controls can be implemented in various 
known ways, such as dropdown menus or opening windows displaying the available choices. 
When the user makes a change using one of these controls, template 300 is updated to display the 
effect of the selected change. 

[0032] It will be understood that a service provider may choose to employ more, fewer, or 
different document controls depending on the component elements used by the service provider 
and the level of customizing capabilities the service provider desires to give to the user. As will 
be discussed below, Apply Your Design button 314 allows the user to incorporate design choices 
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made in connection with an earlier designed document. To indicate to the user that the user is 
currently editing the front of the card, Front button 322 is highlighted. When the user is ready to 
begin editing the inside of the card, the user can begin by clicking on Inside button 324, which 
will cause the inside template to be displayed. 

[0033] Fig. 4 represents the editing screen for the inside of the card. The user is presented 
with inside image 400 that, in this example, contains color field 402, image 404, and textbox 406 
pre-fiUed with suggested relevant text relevant to the type of card being designed. For certain 
products, such as folded cards, the user normally wants and expects the inside of the card to be 
visually similar to and compatible with the outside of the card. Because the user may have made 
several changes to the front side template, these changes need to be reflected on the inside of the 
card to ensure the overall product design is aesthetically pleasing to the user. It is highly 
desirable to eliminate the need for the user to expend time and effort to go through the actions of 
manually reproducing the front side changes on the inside. To this end, a product description 
identifier is used to facilitate the definition of the components of the user's customized product 
and to allow for easy inheritance of these definitions both within the same document and by 
other separate documents. 

[0034] This is accomplished by associating a template's individual component element 
identifiers with a product description identifier assigned when the user initiated the design 
session. In the disclosed embodiment, the product description ID is assigned from a sequential 
counter, but other known techniques for assigning unique identifiers could be readily employed. 
Referring to Fig. 6, each product description ID is associated with the identifier for each of the 
particular component elements that make up that document. As mentioned above, the template 
image 300 being viewed by the user is the result of combining the various component elements. 

[0035] In the embodiment discussed herein, each product description ID 602 is associated 
with a front layout ID 604 representing the initial side of the document to be seen by the user 
during the editing process. The changes and selections made by the user on this initial side of 
the document will be used to control the initial appearance of the other side of the document and, 
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as discussed below, of subsequent separate documents. Product description ID 602 is also 
associated with a design ID 606, a font scheme ID 608, a color scheme ID 610, an image ID 612, 
and a text group ID 614. If a template contains multiple images, multiple image identifiers 
would be associated with product description ID 602. 

[0036] For any given type of product, there will be a number of possible layouts, designs, 
font schemes, color schemes, and so forth. Whenever a user uses one or more of document 
controls 310 to change one of the user-selectable component elements, the identifier of the new 
element is incorporated into the IDs associated with product description 602. When the user 
has completed any desired edits and changes to template 300 and clicks on inside 324, template 
400 for the inside of the card is generated and displayed to the user. 

[0037] Referring to Fig. 7, each front layout ID 702 is associated with one or more layouts 
for the other side of the document. The identifier of one of these layouts is designated by the 
service provider as the matching back layout. The layout identified by matching back layout ID 
704 will be used to generate the initial inside template 400. In the example shown in Fig. 7, two 
alternate layouts have been identified by the service provider as being suitable for use with the 
front layout and are identified by alternate back layout IDs 706 and 708. Other numbers of 
backup layouts could be provided. If the user clicks on change inside layout 304 while editing 
template 400, the altemate layout IDs 706 and 708 are used to display selectable thumbnails of 
the two altemate inside layouts for review by the user. If the user selects one of the thumbnail 
images, the layout currently used in template 400 will be replaced with the altemate layout 
selected by the user. 

[0038] The inside of the card, indicated in Fig. 4 as template 400, is dynamically generated 
based on the layout identified by matching back layout ID 704 associated with front layout ID 
702 and the other component element IDs associated with the product description ID 602. In this 
manner, any changes to the color scheme or other user-selectable elements that were made by the 
user while editing template 300 are automatically incorporated into the inside design of the card 
and reflected in template 400. 
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[0039] In the disclosed embodiment, the user may move back and forth at will between the 
front template 300 edit screen and the inside template 400 edit screen using navigation buttons 
front 322 and inside 424. In the disclosed implementation, changes made to front template 300 
are incorporated into inside template 400, but changes made to inside template 400 are not 
incorporated into template 300, though such an implementation could be employed if desired. 
When the user has completed any desired changes to templates 300 and 400 and has entered any 
desired personalized text or images, the user will indicate the user's intention to proceed with 
placing an order for production of the printed product by clicking next button 408. 

[0040] It is desirable that a user who has customized a document be able to reproduce the 
look and style of the document in other future documents. As mentioned above in connection 
with Fig. 3, apply your design button 3 14 is displayed to the user when the user is engaged in 
editing the front of the document. Referring now to Fig. 5, if a user viewing template 300 
clicks on apply your design 314, a new window 500 will be displayed to the user containing 
images or identifiers of documents previously created in this fashion by the user. Images 502, 
504 and 506 are thumbnail images of one side or page of an earlier user document. The user can 
review the thimibnails and, if desired, click on one of the prior document images to select it. It 
does not matter whether the selected document is of a different size, orientation, or layout. In 
response to the user's selection of a document image, the component element IDs associated 
with that document, excluding the product specific elements such as the layout and the text 
group, are applied to the current document and are associated with the product description ID of 
the current document. In this manner the user can save time by quickly incorporating prior 
design elements into the new docxmient, thereby allowing the user to concentrate on the specific 
unique content of the current document. 

[0041] The invention can be applied to creating and displaying custom documents not 
requested by the user. After a user has completed the design of a document, the user will need 
to take certain actions to actually place an order for production of the physical printed product. 
As the user moves through the steps of order processing, the user will be required to provide 
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various information, such as name, address, and phone number, in connection with arranging for 
payment and delivery of the printed version of the product. Certain of this information can be 
used by the service provider, in combination with the design of the product that is being ordered, 
to generate a different product potentially of interest to the user. For example, the user might be 
interested in purchasing matching return address labels containing the user's name and mailing 
address. The service provider can take design, font, image, and other component elements of 
the user's product design, combine them with a return address label layout and the user's name 
and address, and automatically, without user action or request, generate a customized retum 
address label (RAL) that has design features that are similar to the product being ordered. 

[0042] Referring now to Fig. 8, a representation of an order summary screen displayed to the 
user during the ordering process is depicted. The user is presented with the product, price and 
quantity information for the user's document in summary 801 . The user is also presented with a 
second summary 803 that includes additional product, price and quantity information 806 related 
to the additional RAL product. An image of the custom RAL 804 is displayed for the user's 
review. Image 804 includes the user's name and shipping address, provided by the user earlier in 
the order process, and includes component design elements, collectively indicated by 805, 
corresponding to the design elements of the user's product and appropriately modified to fit the 
size and proportion of the RAL. Separate order buttons 802 and 807 are provided so the user 
can select whether to order the product together with the matching custom retum address labels 
or order just the original product without the labels. To provide visual separation between the 
two purchase options, a dividing line 809 may be displayed. 

[0043] For the situations where the user may desire to purchase RALs, but is not satisfied 
with RAL image 804 as displayed, edit button 808 is provided. If edit 808 is clicked by the user, 
the user is provided a RAL editing display, not shown, where the user can make any desired 
changes or corrections to the RAL design. Co-pending and co-owned U.S. Patent Application 
Serial No. 10/255,531 entitled "Supplemental Product System and Method", filed September 26, 
2002, describes a system and method for using information supplied by a customer during the 
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document order placement process to automatically generate and display an image of a different 
custom document and is hereby incorporated by reference into this application. 

[0044] Referring now to Fig. 9, the operation of an embodiment of the invention will be 
discussed. At step 902, a product editing session is initiated by a user. At step 904, a product 
description identifier is assigned to the user's document and associated with the identifiers of the 
various component elements of the document template selected by the user for customization. 
At step 906, the user performs the desired edit operations, which may include one or more 
changes to the product design using document controls 310. Step 906 may also include 
incorporating component elements from a user's previously designed product using apply your 
design button 3 14 as discussed above. 

[0045] When the user is finished with the front side of the document and indicates a desire to 
edit the inside of the document, the component elements of the front side design as indicated by 
the identifiers associated with the product description ID are used to dynamically generate the 
inside template displayed to the user. The user can then perform the user's desired editing 
operations on the inside. As indicated by connection 920, the user may, if desired, retum to the 
front and make further changes. When the user has completed the design, the user initiates 
order processing at step 912. During the checkout process, at step 914 a custom document 
based in part on the component elements is automatically generated and displayed to the user for 
possible purchase, as discussed above in connection with Fig. 8. At step 916, the user can select 
to purchase only the product designed by the user or can purchase both that product and the 
custom product. 

[0046] While illustrative embodiments have been explained, altemate embodiments could 
also be employed. As one altemate embodiment, fewer user-controlled options could be 
provided. For example, font information and/or design information could be either or both 
incorporated into the layout definition. In this embodiment, document controls 600 would only 
contain color scheme and layout selection controls. While the invention has been discussed in 
the context of a holiday card, it will be appreciated that it can be applied to a wide range of 
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materials for commercial and personal use. Therefore, the described embodiments are to be 
considered as illustrative rather than restrictive and the scope of the invention is as indicated in 
the following claims and all equivalent methods and systems. 
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